<template>
  <div>
    <div class="header">
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
        <div slot="right">
          <van-icon name="star-o" class="icon"  v-if="userGoodsScore.collected===0||userGoodsScore.collected===null" @click="starClick(1)"/>
          <van-icon name="star" class="icon"  v-if="userGoodsScore.collected===1" @click="starClick(0)"/>
          <van-icon name="share-o" class="icon" />
        </div>
      </van-nav-bar>
    </div>
    <div class="goods">
      <div class="goodsImg">
        <van-image
          width="100%"
          fit="fill"
          :src="goodsVo.iconUrl"
        />
      </div>

      <div class="content">
        <h2>{{goodsVo.goodName}}</h2>
        <div class="price">
          <span>￥{{goodsVo.price}}</span>
        </div>
        <div class="tags">
          <span>{{goodsVo.description}}</span>
        </div>
      </div>
    </div>


    <div class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="shop-o" text="店铺" @click="toShopIndex(goodsVo.shopId)"/>
        <van-goods-action-button text="立即购买" type="danger" plain  @click="onClickBuy" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
    import { getById } from "@/api/goods";
    import { getUrl } from  '@/api/file'
    import { updateUserGoodsScore,getUserGoodsScore } from "@/api/search";
    import store from '@/store'
    import { Toast } from 'vant';
    export default {
      name: "index",
      data() {
        return {
          goodsVo: {
            iconUrl:''
          },
          userGoodsScore:{
            collected: 0
          },
        }
      },
      mounted() {
        this.getGoodsDetailByIdRequest();
        this.userBehavior();
      },
      methods:{
        onClickLeft(){
          this.$router.go(-1)
        },
        getGoodsDetailByIdRequest(){
          getById(this.$route.query.goodsId).then((response) => {
            this.goodsVo = response.data;
            getUrl(this.goodsVo.iconUrl).then((response) => {
              this.goodsVo.iconUrl = response.data;
            });
          });
        },
        onClickBuy(){
          if(store.getters.name) {
            updateUserGoodsScore({"goodsId": this.$route.query.goodsId, "bought": 1}).then((response) => {
              Toast.success('购买成功');
            });
          }else{
            Toast.fail('请先登录');
          }
        },
        userBehavior(){
          if(store.getters.name){
            updateUserGoodsScore({"goodsId":this.$route.query.goodsId,"visited":1}).then((response) => {
              getUserGoodsScore(this.$route.query.goodsId).then((response) => {
                if(response.data){
                  this.userGoodsScore = response.data;
                }
              });
            });
          }
        },
        starClick(collected){
          if (store.getters.name){
              updateUserGoodsScore({"goodsId":this.$route.query.goodsId,"collected":collected}).then((response) => {
                getUserGoodsScore(this.$route.query.goodsId).then((response) => {
                  if(response.data){
                    this.userGoodsScore = response.data;
                  }
                });
              });
            }else{
              Toast("请先登录!");
            }
          }
        },
        toShopIndex: function (shopId) {
          this.$router.push({
            name: 'Shop',
            query: {
              shopId: shopId,
            }
          });
        },


    }
</script>

<style scoped>
  .icon{
    margin-right: 8px;
  }
  .goods>.content{
    margin: 10px;
    font-size: 13px;}
  .goods>.content>.price{
    color: red;
  }
  .goods>.content>div{
    margin-top: 10px;
  }
</style>
